<template>
  <div id="app">
    <h3>声明式渲染</h3>
    <IntroduceApp1></IntroduceApp1>
    <IntroduceApp2></IntroduceApp2>

    <hr />

    <h3>条件与循环</h3>
    <IntroduceApp3></IntroduceApp3>
    <IntroduceApp4></IntroduceApp4>
    <hr />

    <h3>处理用户输入</h3>
    <IntroduceApp5></IntroduceApp5>
    <IntroduceApp6></IntroduceApp6>
    <hr />
    <h3>组件化应用构建</h3>
    <IntroduceApp7></IntroduceApp7>
    <hr />
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import IntroduceApp1 from "@/components/01-介绍/IntroduceApp1.vue";
import IntroduceApp2 from "@/components/01-介绍/IntroduceApp2.vue";
import IntroduceApp3 from "@/components/01-介绍/IntroduceApp3.vue";
import IntroduceApp4 from "@/components/01-介绍/IntroduceApp4.vue";
import IntroduceApp5 from "@/components/01-介绍/IntroduceApp5.vue";
import IntroduceApp6 from "@/components/01-介绍/IntroduceApp6.vue";
import IntroduceApp7 from "@/components/01-介绍/IntroduceApp7.vue";

@Component({
  components: {
    IntroduceApp7,
    IntroduceApp6,
    IntroduceApp5,
    IntroduceApp4,
    IntroduceApp3,
    IntroduceApp2,
    IntroduceApp1,
  },
})
export default class App extends Vue {}
</script>

<style></style>
